<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import { uploadJournalImg } from "../../api/toolsApi"
import { ResponseCode } from '@/common/Responsetypes';
import useJournal from './useJournal';
import { useMarkerStore } from '@/stores/useMarkerStore';
import type { IMarkerIconExposedProps } from '@/common/MapTypes';
import type { Ref } from 'vue';
import JournalLocal from "@/components/journal-comps/journal-local.vue"
import JournalAlbum from "@/components/journal-comps/journal-album.vue"
import { IUploadImgStatus, type IPhotos, type IUploadImg } from '@/common/JournalTypes';

const { getActiveMarker } = useMarkerStore()

const activeMarkerRef: Ref<null | IMarkerIconExposedProps> = ref(null)

onMounted(() => {
  activeMarkerRef.value = getActiveMarker()
  if (activeMarkerRef.value === null) {
    uni.showToast({
      title: '请先选择一个位置',
      icon: 'none',
      duration: 2000,
      success: () => {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }
    })

  }

})

const fileList = ref<IUploadImg[]>([])

const {
  handlePublishJournal,
  journalInfo,
  imgUploadedRef
} = useJournal(fileList, activeMarkerRef)


// 删除图片
function deletePic(e: { index: number }) {
  fileList.value.splice(e.index, 1)
}

function afterRead(event: { file: IUploadImg[], index: number, name: string }) {
  event.file.map((item) => {
    fileList.value.push({
      ...item,
      status: IUploadImgStatus.UPLOAD,
      message: '上传中',
    })
  })

  const uploadImgs = fileList.value.filter((item) => item.status === 'uploading')

  uploadJournalImg(uploadImgs).then((result) => {
    if (result.code === ResponseCode.PASS) {
      const beginIndex = fileList.value.length - uploadImgs.length
      result.data.forEach((item: IPhotos) => {
        fileList.value[item.index + beginIndex].status = IUploadImgStatus.SUCCESS;
        fileList.value[item.index + beginIndex].url = item.url;
        fileList.value[item.index + beginIndex].message = ""
        fileList.value[item.index + beginIndex].min = item.min
      });
    }
  })
}

</script>

<template>
  <view class='journal-editor__container mlr-40 pt-40 pb-40'>
    <!-- 文字区域 -->
    <uv-textarea border="none" class="mb-40 pb-20" focus autoHeight count maxlength="60" v-model="journalInfo.content"
      placeholder="这一刻的想法..."></uv-textarea>

    <JournalLocal :name="activeMarkerRef?.poi.name" />

    <JournalAlbum :afterRead="afterRead" :deletePic="deletePic" :fileList="fileList" />

    <!-- 可见范围 -->
    <uv-cell class="mt-40" icon="account" title="谁可以看" :label="journalInfo.is_open ? '所有用户都可见' : '仅自己可见'">
      <template v-slot:value>
        <text class="mr-20">{{ journalInfo.is_open ? '公开' : '仅自己' }}</text>
        <uv-switch v-model="journalInfo.is_open" />
      </template>
    </uv-cell>

    <!-- 操作区域 -->
    <view class="journal-editor__operate mt-40">
      <uv-button @click="handlePublishJournal" :disabled="!journalInfo.content || !imgUploadedRef" type="primary"
        width="80rpx" round>发布</uv-button>
    </view>
  </view>
</template>

<style scoped lang='scss'>
@import "@/styles/mixin/index.scss";

.journal-editor {
  &__local {
    display: flex;
    font-size: var(--fl-font-size-small);
    color: #747171;

    &-name {
      @include textEllipsis()
    }
  }
}
</style>